<template>
    <div class="doorChecklist">
        <Row>
            <Col :xs="24">
                <Input
                    class="w-input-120"
                    v-model="name"
                    clearable
                    placeholder="姓名"
                />
                <Input
                    class="w-input-200"
                    v-model="idCard"
                    clearable
                    placeholder="身份证号"
                />
                <Button type="primary" @click="loadPage(1)" class="btn">
                    <Icon type="ios-search" size="14" />
                </Button>
                <Button @click="cancel" class="btn">
                    <i class="iconfont icon-gengxin"></i>
                </Button>
            </Col>
        </Row>
        <Table
            class="m-table"
            border
            stripe
            :loading="isloading"
            :columns="columns"
            :data="datalist"
        >
        </Table>
        <div class="page">
            <Page
                :total="count"
                :current="pageNo"
                :page-size="pageSize"
                show-total
                show-elevator
                @on-change="loadPage"
            />
        </div>
        <Modal title="签到照片" v-model="visible" footer-hide>
            <img
                :src="fileBaseUrl + imgName"
                v-if="visible"
                style="width: 100%"
            />
        </Modal>
    </div>
</template>
<script>
import api from '@/api/commonApi';
export default {
    data() {
        return {
            visible: false,
            isloading: false,
            name: '',
            idCard: '',
            imgName: '',
            columns: [
                {
                    title: '排序',
                    key: 'iNum',
                    align: 'center',
                    width: 70,
                    render: (h, params) => {
                        let iNum =
                            (this.pageNo - 1) * this.pageSize +
                            params.index +
                            1;
                        return h('span', iNum);
                    }
                },
                {
                    title: '姓名',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '身份证号',
                    key: 'idcard',
                    align: 'center'
                },
                {
                    title: '手机号',
                    key: 'telephone',
                    align: 'center'
                },
                {
                    title: '采集点',
                    key: 'locationName',
                    align: 'center',
                    render: (h, params) => {
                        let locationName = params.row.locationName;
                        if (locationName === '' || locationName == null) {
                            return h('span', '--');
                        } else {
                            return h('span', {
                                domProps: {
                                    innerHTML: locationName
                                }
                            });
                        }
                    }
                },
                {
                    title: '实际采集地点',
                    key: 'address',
                    align: 'center'
                },
                {
                    title: '封箱编号',
                    key: 'tubesCode',
                    align: 'center',
                    render: (h, params) => {
                        let tubesCode = params.row.tubesCode;
                        if (tubesCode === '' || tubesCode == null) {
                            return h('span', '--');
                        } else {
                            return h('span', {
                                domProps: {
                                    innerHTML: tubesCode
                                }
                            });
                        }
                    }
                },
                {
                    title: '样本编号',
                    key: 'boxCode',
                    align: 'center',
                    render: (h, params) => {
                        let boxCode = params.row.boxCode;
                        if (boxCode === '' || boxCode == null) {
                            return h('span', '--');
                        } else {
                            return h('span', {
                                domProps: {
                                    innerHTML: boxCode
                                }
                            });
                        }
                    }
                },
                {
                    title: '登记员',
                    key: 'doctorName',
                    align: 'center'
                },
                {
                    title: '登记员联系电话',
                    key: 'doctorPhone',
                    align: 'center',
                    width: 130
                },
                {
                    title: '采集时间',
                    key: 'collectionTime',
                    align: 'center',
                    render: (h, params) => {
                        let collectionTime = params.row.collectionTime;
                        if (collectionTime === '' || collectionTime == null) {
                            return h('span', '--');
                        } else {
                            return h('span', {
                                domProps: {
                                    innerHTML: collectionTime
                                }
                            });
                        }
                    }
                },
                {
                    title: '状态',
                    key: 'tubesStatus',
                    align: 'center',
                    render: (h, params) => {
                        let status = params.row.tubesStatus;
                        let statusText =
                            status === '2'
                                ? '作废'
                                : status === '3'
                                ? '作废重采 '
                                : status === '4'
                                ? '已出结果'
                                : '已采集';
                        return h('span', {
                            domProps: {
                                innerHTML: statusText
                            }
                        });
                    }
                },
                {
                    title: '操作',
                    key: 'operate',
                    align: 'center',
                    width: 130,
                    render: (h, params) => {
                        let id = params.row.id;
                        let imageUrl = params.row.imageUrl;
                        if (imageUrl) {
                            return [
                                h(
                                    'span',
                                    {
                                        attrs: {
                                            href: 'javascript:void(0);'
                                        },
                                        style: {
                                            color: '#258afb',
                                            margin: '0px 6px'
                                        },
                                        on: {
                                            click: () => {
                                                this.imgName = JSON.parse(
                                                    params.row.imageUrl
                                                ).fileName;
                                                this.visible = true;
                                            }
                                        }
                                    },
                                    '查看签到照片'
                                )
                            ];
                        } else {
                            return h('span', {}, '--');
                        }
                    }
                }
            ],
            datalist: [],
            count: 0,
            pageSize: 10,
            pageNo: 1,
            id: null,
            fundcode: false,
            title: ''
        };
    },
    created() {},
    mounted() {
        // 首次加载数据
        this.loadPage(this.pageNo);
    },
    methods: {
        srInput() {
            this.info.phone = this.info.phone.replace(/[^0-9]/g, '');
        },
        cancel() {
            this.name = '';
            this.idCard = '';
            this.loadPage(1);
        },
        // 加载列表数据
        loadPage(pageNo) {
            this.isloading = true;
            this.pageNo = parseInt(pageNo);
            var params = {};
            params.name = this.name.trim();
            params.idCard = this.idCard;
            params.taskLocationId = this.$route.query.taskLocationId;
            params.pageNo = pageNo;
            params.pageSize = this.pageSize;
            this.$axios
                .post(api.queryAppoinmentListBytaskLocationId, params)
                .then((resp) => {
                    if (resp.data.success) {
                        this.count = resp.data.object.total;
                        if (resp.data.object.records) {
                            this.datalist = resp.data.object.records;
                            this.isloading = false;
                        } else {
                            this.datalist = [];
                            this.count = 0;
                            this.isloading = false;
                        }
                    } else {
                        this.isloading = false;
                        this.$Message.info('数据异常请稍后重试');
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        }
    }
};
</script>
<style lang="less" scoped>
.doorChecklist {
    padding: 20px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .btn {
        width: 45px;
        height: 30px;
        line-height: 10px;
    }
    .w-input-80 {
        width: 80px;
    }
    .w-input-120 {
        width: 120px;
    }
    .w-input-200 {
        width: 200px;
    }
    .m-table {
        margin: 10px 0;
    }
    .page {
        text-align: center;
        margin: 20px 0;
    }
}
</style>
